<template lang="pug">
.alarm-wrapper
  el-table.table-xxs(
    border
    :data="tableData"
    :default-sort="{prop: 'createTime', order: 'descending'}"
    height="100%")
    el-table-column(
      v-for="(item, index) of tableHead"
      :key="index"
      :label="item.label"
      :prop="item.prop"
      :sortable="item.sort"
      :formatter="item.formatter"
      :minWidth="item.minWidth")
</template>

<script>
export default {
  props: {
    siteId: Number
  },
  data () {
    return {
      tableData: [],
      tableHead: [
        {
          prop: 'createTime',
          label: '时间',
          sort: true,
          minWidth: 120,
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.$moment(cellValue, 'x').format('YYYY-MM-DD HH:mm')
          }
        }, {
          prop: 'name',
          label: '事件名称'
        }, {
          prop: 'type',
          label: '事件类型',
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            const label = this.relationList.eventType.find(item => (item.value === cellValue)).label || '-'
            return label
          }
        }, {
          prop: 'level',
          label: '事件等级',
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.relationList.eventLevel.find(item => (item.value === cellValue)).label || '-'
          }
        }, {
          prop: 'description',
          label: '事件描述'
        }, {
          prop: 'monitorTarget',
          label: '对象类型',
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.relationList.monitorTargets.find(item => (item.value === cellValue)).label || '-'
          }
        },
        //  {
        //   prop: 'siteCode',
        //   label: '站点编号'
        // },
        {
          prop: 'status',
          label: '处理状态',
          formatter: (row, column, cellValue, index) => {
            if (!cellValue) return '-'
            return this.relationList.eventStatus.find(item => (item.value === cellValue)).label || '-'
          }
        }, {
          prop: 'processUserId',
          label: '处理人'
        }, {
          prop: 'processRemark',
          label: '处理意见'
        }, {
          prop: 'remark',
          label: '备注'
        }
      ],
      relationList: []
    }
  },
  methods: {
    getData () {
      this.$get({
        url: 'pn/monitor/event',
        params: {
          filterBy: `siteId|eq|${this.siteId}`,
          orderBy: 'createTime|desc',
          pageSize: 99999,
          pageIndex: 1
        }
      }).then(res => {
        this.tableData = res.data
      })
    },
    getRelationList (callback) {
      this.$getRelation({
        relations: 'monitorTargets,eventLevel,eventType,eventStatus'
      }).then(data => {
        console.log('res', data)
        this.relationList = data
        callback()
      })
    }
  },
  mounted () {
    this.getRelationList(this.getData)
  }
}
</script>

<style lang="sass" scoped>
.alarm-wrapper
  flex: 1
</style>
